<template>
  <div class="it-picker-months">
    <div class="month-picker-popover-content">
      <div class="month-picker-months">
        <div
          v-for="(row, i) in months"
          :key="`${row}-${i}`"
          class="month-picker-months-row"
        >
          <div
            v-for="(cell, j) in row"
            :key="`${cell}-${j}`"
            class="month-picker-months-cell"
            :class="monthClasses(i, j)"
            @click="onClickMonth(i, j)"
          >
            {{ cell }}
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { toMatrix } from '../datepicker/util'
import { cloneDate, getYearMonthDay } from '../datepicker/date'
import { ref, computed } from 'vue'

const props = defineProps({
  formatDate: {
    type: [Object, String],
    default: () => {
      return {}
    },
  },
})

const tempValue = ref(props.formatDate)

const MONTHS = [
  '一月',
  '二月',
  '三月',
  '四月',
  '五月',
  '六月',
  '七月',
  '八月',
  '九月',
  '十月',
  '十一月',
  '十二月',
]
let months = ref(toMatrix(MONTHS, 4))

const showFormatDate = computed(() => {
  const [year, month, day] = getYearMonthDay(tempValue.value)
  return { year, month: month + 1, day }
})

const emits = defineEmits(['picker-change'])
const onClickMonth = (i, j) => {
  const month = j + i * 4
  const [year, , day] = getYearMonthDay(tempValue.value)
  emits('picker-change', {
    value: new Date(year, month, day),
  })
}
const monthClasses = (i, j) => {
  const month = j + i * 4
  return {
    active: isSameMonth(month),
    current: isCurrentMonth(month),
  }
}
const isCurrentMonth = (month) => {
  const [year] = getYearMonthDay(tempValue.value)
  const [year2, month2] = getYearMonthDay(new Date())
  return year === year2 && month === month2
}
const isSameMonth = (month) => {
  const [year] = getYearMonthDay(tempValue.value)
  const [year2, month2] = getYearMonthDay(props.formatDate)

  return year === year2 && month === month2
}

// const changeMode = () => {
//   emits('mode-change', 'Picker-Years')
// }
</script>

<style scoped>
@import url('./month-picker.css');
</style>
